<template>
  <div class="lunbo">
		<div class="icon" v-for="item of list" :key="item.id">
			<div class="icon-img"> 
				<img class="icon-img-content" :src="item.imgUrl">
			</div>  
			<p class="icon-desc">{{item.name}}</p>
		</div>
  </div>
</template> 

<script> 
export default {
  name: 'lunbo',
	data () {
		return {
			list:[
				{
					id:'001',
					name:'软件开发', 
					imgUrl:require('../../../assets/imges/kaifa.png')
				},{
					id:'002',
					name:'营销推广', 
					imgUrl:require('../../../assets/imges/tuig.png')
				},
				{
					id:'003',
					name:'创意设计', 
					imgUrl:require('../../../assets/imges/chuangy.png')
				},
				{
					id:'004',
					name:'域名服务', 
					imgUrl:require('../../../assets/imges/yum.png')
				}, 
				{
					id:'005', 
					name:'电商服务', 
					imgUrl:require('../../../assets/imges/dians.png')
				},
				{  
					id:'006', 
					name:'知识产权', 
					imgUrl:require('../../../assets/imges/zscq.png')
				},
			]
		}
	}
} 
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> 
.lunbo{
	padding: 0 .5rem .3rem .5rem;
	position: relative;
	background-color: #fff;
}
.lunbo:after{
	display: block;
	visibility:hidden;
	clear: both;
	height: 0;
	content: "";
} 
.icon{
	width:33% ;
	float: left;
	height: 1.24rem;
	margin-top:.3rem ;
}
.icon-img{
	width: .88rem;
	height: .88rem;
	margin: auto;
}	
.icon-img-content{
	width: 100%;
	height: 100%;
	display: block;
}
.icon-desc{
	text-align: center;
	font-size: .24rem;
	margin-top: .14rem;
}
</style>
 